<template>
    <div>
        <h3>房型列表</h3>
        房型名称:
        <input type="text" v-model="queryInfo.name">
        <input type="button" value="查询" class="btn btn-primary" @click="GetHosueType">
        <table class="table table-bordered">

            <tbody>
                <tr>
                    <th>房型名称</th>
                    <th>单价(元)</th>
                    <th>室内面积(平方米)</th>
                    <th>最多入住人数</th>
                    <th>图片</th>
                    <th>房型描述</th>
                    <th>是否有窗</th>
                    <th>操作</th>
                </tr>
                <tr v-for="itme in data.list">
                    <td>{{ itme.HouseTypeName }}</td>
                    <td>{{ itme.Price }}</td>
                    <td>{{ itme.Area }}</td>
                    <td>{{ itme.Count }}</td>
                    <td><img :src="itme.Photo" width="100px" height="100px" alt=""></td>
                    <td>{{ itme.Desc }}</td>
                    <td>{{ itme.IsWindow == 1 ? "有窗" : "无窗" }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success" @click="Upd(itme.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="Del(itme.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共<b>{{ data.totalCount }}</b>条</span>
            <span>每页<b>{{ queryInfo.pageSize }}</b>条</span>
            <span>共<b>{{ queryInfo.pageIndex }}/{{ data.totalPage }}页</b></span>
            <input type="button" value="首页" @click="GoPage(1)">
            <input type="button" value="上一页" @click="GoPage(queryInfo.pageIndex - 1)">
            <span v-for="item in data.totalPage" @click="GoPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="GoPage(queryInfo.pageIndex + 1)">
            <input type="button" value="尾页" @click="GoPage(data.totalPage)">
            <select v-model="queryInfo.pageSize" @change="GetHosueType">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
            </select>
            <input type="text" v-model="queryInfo.pageIndex">
            <input type="button" value="跳转" class="btn btn-warning" @click="GoPage(queryInfo.pageIndex)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';

const route = useRoute();
const router = useRouter();

onMounted(() => {
    GetHosueType();
})

let data: any = reactive({
    totalCount: 0,
    totalPage: 0,
    list: [],
})

let queryInfo = reactive({
    pageIndex: 1,
    pageSize: 2,
    name: "",
})

let arr=ref([2,3,5,10])

const GetHosueType = () => {
    axios({
        method: "get",
        url: "/api/House/ShowHouseType",
        params: queryInfo
    })
        .then(res => {
            Object.assign(data, res.data);
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}


const Upd = (id: any) => {
    router.push({
        path: '/houseTypeUpd',
        query: {
            id: id
        }
    })
}

const Del = (id: any) => {
    if(!confirm("确定删除吗?")){
        return;
    }
    axios({
        method: "delete",
        url: "/api/House/DelHouseType",
        params: {
            id: id
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert("删除成功");
                GetHosueType();
            }
            else {
                alert("删除失败")
            }
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}

const GoPage = (num: any) => {
    if (num < 1) {
        queryInfo.pageIndex = 1;
        return;
    }
    if (num > data.totalPage) {
        queryInfo.pageIndex = data.totalPage;
        return;
    }
    queryInfo.pageIndex = num;
    GetHosueType();

}

</script>

<style scoped>
a {
    margin: 5px 5px;
}
span{
    margin: 5px 5px;
}
</style>